<template>
  <div class="drawStation">

      <div>
        <el-form ref="form" :inline="true" :model="location">
          <el-form-item label="地理位置名称">
            <el-input v-model="location.pointName" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="location.lng" size="small"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="location.lat" size="small"></el-input>
          </el-form-item>
          <el-form-item label="公里范围">
            <el-input v-model="location.radius" size="small"></el-input>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="location.limit" size="small"></el-input>
          </el-form-item>
          <el-button type="success" @click="saveGeo">添加位置</el-button>
          <el-button type="info" @click="findRadius">搜索</el-button>
        </el-form>
    </div>

    <div id="draw-station-container"></div>




    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="附近司机" :visible.sync="dialogTableVisible">
      <el-table :data="drivers">
        <el-table-column property="content.name" label="司机名称" width="150"></el-table-column>
        <el-table-column property="content.point.x" label="经度" width="200"></el-table-column>
        <el-table-column property="content.point.y" label="纬度"></el-table-column>
        <el-table-column property="distance.value" label="公里(km)"></el-table-column>

      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click=""></el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {JS_API_KEY} from '@/settings/amap.config'
import AMapLoader from "@amap/amap-jsapi-loader"
import { isEmpty } from '@/utils/my.js'
import { addGeo,findRadius } from '@/api/vehicle/geo.js'
// window._AMapSecurityConfig = {
//   securityJsCode: '77e5ca24d95de02b0b6e38257d322e1f'
// }
export default {
  name: "DrawStation",
  data() {
    return {
      // 地图对象
      AMap: null,
      // 地图实例对象
      map: null,
      // 经纬度
      location: {
        lat: '',
        lng: '',
        pointName:'',
        radius:'',
        limit:''
      },
      drivers:[],
      dialogTableVisible:false,
      // 搜索输入
      tinput: '',
      auto: null,
      placeSearch: null,
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    /**
     * 创建地图
     */
    initMap() {
      AMapLoader.load({
        key: JS_API_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.Autocomplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
          this.AMap = AMap
          this.map = new AMap.Map("draw-station-container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [116.94557,39.170956], //初始化地图中心点位置
            // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
          })
          // 地图控件
          this.map.addControl(new AMap.Scale())
          // 搜索框自动完成类
          this.auto = new AMap.Autocomplete({
            input: "tinput"
          })
          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map
          })
          // 当选中某条搜索记录时触发
          this.auto.on("select", this.select)
          // poi覆盖物点击事件
          this.placeSearch.on("markerClick", this.clickMarkerHandler)
          // 地图点击事件
          this.map.on('click', this.clickMapHandler)

        })
        .catch((e) => {
          console.log(e)
        })
    },

    // 当选中某条记录时会触发
    select(e) {
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name) //关键字查询查询
    },

    // 点击地图事件
    clickMapHandler(e) {
      this.location.lng = e.lnglat.getLng()
      this.location.lat = e.lnglat.getLat()
    },
    // 点击poi覆盖物事件
    clickMarkerHandler(e) {
      this.location.lng = e.data.location.lng
      this.location.lat = e.data.location.lat
    },
    // 确定拾取坐标点
    handleDrawStation() {
      if(isEmpty(this.location.lng) || isEmpty(this.location.lat)) {
        return this.$message.error('请先拾取坐标点')
      }
      this.$emit('selectLocation', this.location)
    },
    saveGeo(){
      let parm={};
      parm.latitude=this.location.lat;
      parm.longitude=this.location.lng;
      parm.pointName=this.location.pointName;
      addGeo(parm).then(res=>{
        console.log(res)
        this.$message("添加成功");
        this.location={};
        //location.reload();
      })
    },
    //以给定的经纬度为中心， 返回键包含的位置元素当中
    findRadius(){
      let parm={};
      parm.latitude=this.location.lat;
      parm.longitude=this.location.lng;
      parm.radius=this.location.radius;
      parm.limit=this.location.limit;
      findRadius(parm).then(res=>{
          if(res.code==200){
            this.drivers=JSON.parse(res.data)
           console.log(res.data)
            this.$message("搜索成功")
            this.dialogTableVisible=true
          }



        //   this.drivers=res.data;
        // //console.log(this.drivers)
        //   this.dialogTableVisible=true;




      })
    }
  },
  beforeDestroy() {
    // 销毁地图
    if(this.map) this.map.destroy()
  },



};
</script>

<style lang="scss" scoped>
.drawStation {

  #draw-station-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: calc(100vh - 100px);
  }

  .input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .el-input {
      width: 220px;
      margin-right: 20px;
    }
  }
}
</style>
